<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="assets/lib/html5shiv.js"></script>
    <script type="text/javascript" src="assets/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="assets/zTree/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="assets/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="assets/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="assets/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="assets/skin/green/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
    <title>指标体系设计软件</title>
    <style>
        .line{
            border-top:none;
        }
    </style>
</head>
<body class="big-page">
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container-fluid cl">
            <img src="assets/images/admin-login-bg.jpg" class='imgLogo' alt="logo图">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="#javascript:;">指标体系设计软件</a>
            <nav class="nav navbar-nav">
                <ul class="cl">
                    <li><a href="index.html"><i class="Hui-iconfont Hui-iconfont-home"></i> 首页</a></li>
                    <li><a href="normList.html"><i class="Hui-iconfont Hui-iconfont-manage2"></i> 评估指标模块</a></li>
                    <li><a href="systemList.html" class="active"><i class="Hui-iconfont Hui-iconfont-fenlei"></i> 评估体系模块</a>
                    </li>
                    <li><a href="versionList.html"><i class="Hui-iconfont Hui-iconfont-middle"></i> 体系版本模块</a></li>

                </ul>
            </nav>
            <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                <ul class="cl">
                    <li>超级管理员</li>
                    <li class="dropDown dropDown_hover">
                        <a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
                            <li><a href="#">切换账户</a></li>
                            <li><a href="#">退出</a></li>
                        </ul>
                    </li>
                    <li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a> </li>
                    <li id="Hui-skin" class="dropDown right dropDown_hover"> <a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px">&#xe62a;</i></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
                            <li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
                            <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                            <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                            <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                            <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<!--体系展示主体-->
<section class="Hui-article-box">
    <div class="container">
        <div class="zTreeDemoBackground col-xs-12 col-sm-12 col-md-4 col-lg-4">
            <ul id="treeDemo" class="ztree box-shadow"></ul>
        </div>
        <!--树形结构-->
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" >
            <div class="box-shadow" id="treeDraw">
            </div>
        </div>
    </div>
</section>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="assets/zTree/jquery.ztree.core.js"></script>
<script type="text/javascript" src="assets/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="assets/js/H-ui.min.js"></script>
<script type="text/javascript" src="assets/js/H-ui.admin.js"></script>
<script src="assets/goJs/goJs.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<SCRIPT type="text/javascript">

    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    var zNodes =[
        { id:1, pId:0, name:"父节点1 - 展开", open:true},
        { id:11, pId:1, name:"父节点11 - 折叠"},
        { id:111, pId:11, name:"叶子节点111"},
        { id:112, pId:11, name:"叶子节点112"},
        { id:113, pId:11, name:"叶子节点113"},
        { id:114, pId:11, name:"叶子节点114"},
        { id:12, pId:1, name:"父节点12 - 折叠"},
        { id:121, pId:12, name:"叶子节点121"},
        { id:122, pId:12, name:"叶子节点122"},
        { id:123, pId:12, name:"叶子节点123"},
        { id:124, pId:12, name:"叶子节点124"},
        { id:13, pId:1, name:"父节点13 - 没有子节点", isParent:true},
    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        init();
    });
    function init() {
        var $ = go.GraphObject.make; ;//构建GoJs绘制图表的基类
        myFullDiagram =
            $(go.Diagram, "treeDraw",                 {
                    initialAutoScale: go.Diagram.UniformToFill,
                    maxScale: 0.8,
                    initialContentAlignment: go.Spot.Center,//控制图表内容的初始大小和位置
                    "draggingTool.dragsTree": true,//允许拖拽
                    isReadOnly: true,
                    "animationManager.isEnabled": false,
                    layout: $(go.TreeLayout,
                        { angle: 90, sorting: go.TreeLayout.SortingAscending }),
                    maxSelectionCount: 1,
                });
            //为diagram对象添加监听方法
            myFullDiagram.addDiagramListener("ObjectDoubleClicked", function(e) {
                console.log(e.subject.part.data); //获取数据内容
            });
        var bluegrad = $(go.Brush, "Linear", { 0: "#C4ECFF", 1: "#70D4FF" });
        var myNodeTemplate =
            $(go.Node, "Auto",
                { locationSpot: go.Spot.Center },
                new go.Binding("text", "key", go.Binding.toString),
                $(go.Shape, "Rectangle",
                    new go.Binding("fill", "color"),
                    { stroke: null }),
                $(go.TextBlock,
                    { margin: 8},
                    new go.Binding("text", "key", function(k) { return k; }))
            );
        myFullDiagram.nodeTemplate = myNodeTemplate;
               var myLinkTemplate =
            $(go.Link,
                { routing: go.Link.Normal, selectable: false },
                $(go.Shape,
                    { strokeWidth: 1 })
            );
        myFullDiagram.linkTemplate = myLinkTemplate;
        // Create 节点
        setupDiagram();
        highlighter =
            $(go.Part, "Auto",
                {
                    layerName: "Background",
                    selectable: false,
                    isInDocumentBounds: false,
                    locationSpot: go.Spot.Center
                },
                $(go.Shape, "Ellipse",
                    {
                        fill: $(go.Brush, "Radial", { 0.0: "blue", 1.0: "black" }),
                        stroke: null,
                        desiredSize: new go.Size(400, 400)
                    })
            );
        myFullDiagram.add(highlighter);
    }

    /**数据渲染*/
    function setupDiagram() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");//zTree对象
        var node = treeObj.getNodes(); //可以获取所有的父节点
        var nodes = treeObj.transformToArray(node); //获取树所有节点
        var nodeDataArray = [];
        var color = ["#568bf3","lightBlue",'pink','blue'];
        $.each(nodes,function(k,v){
                nodeDataArray.push({
                    key: v.name,
                    id:v.id,
                    pId:v.pId === null?0:v.pId,
                    color:color[v.level]
                });
        });
        var linkDataArray =linkValue(nodeDataArray);

        myFullDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

    }
    /**连接节点*/
    function linkValue(normArr){
        var linkArr = [];
        for(var i=0;i<normArr.length;i++){
            for(var j=0;j<normArr.length;j++){
                if(normArr[i].id === normArr[j].pId){
                    linkArr.push({from: normArr[i].key, to: normArr[j].key});
                }else{
                    continue;
                }
            }
        }
        return linkArr;
    }
</SCRIPT>
</body>
</html>